{% extends "base.html" %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>🔥 热销商品（实时库存）</h2>
    {% if not current_user.is_authenticated %}
        <a href="{{ url_for('login') }}" class="btn btn-outline-primary">登录购物</a>
    {% endif %}
</div>

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
    {% for product in products %}
        <div class="col">
            <div class="card h-100 position-relative">
                <!-- 库存标签 -->
                {% if product.stock <= 0 %}
                    <span class="stock-badge stock-out">售罄</span>
                {% elif product.stock <= 3 %}
                    <span class="stock-badge stock-low">仅剩 {{ product.stock }} 件</span>
                {% else %}
                    <span class="stock-badge stock-in">库存 {{ product.stock }} 件</span>
                {% endif %}
                
                <img src="{{ url_for('static', filename=product.image) }}" 
                     class="product-img card-img-top" 
                     alt="{{ product.name }}">
                <div class="card-body d-flex flex-column">
                    <h5 class="card-title">{{ product.name }}</h5>
                    <p class="card-text text-danger fw-bold">¥{{ product.price }}</p>
                    <p class="card-text small">{{ product.description }}</p>
                    <div class="mt-auto">
                        {% if product.stock > 0 %}
                            <a href="{{ url_for('add_to_cart', product_id=product.id) }}" 
                               class="btn btn-primary btn-sm w-100">
                                ➕ 加入购物车
                            </a>
                        {% else %}
                            <button class="btn btn-secondary btn-sm w-100" disabled>售罄</button>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
</div>
{% endblock %}